<%@ page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>巡检进度报告</title>
    <t:base type="jquery,easyui,tools,echarts"></t:base>
    <style>
        .chart-container {
            width: 100%;
        }

        .search-bar {
            height: 40px;
            width: 80%;
            margin: 0 auto;
        }

        .search-bar .condition {
            width: 90%;
            float: left;
        }

        .search-bar div:last-child {
            width: 10%;
            float: right;
            text-align: right;
        }

        .search-bar span {
            padding-right: 10px;
        }

        .search-bar span select {
            height: 24px !important;
        }

        .search-bar .search-btn {
            float: right;
            width: 10%;
            text-align: center;
            line-height: 40px;
        }

        #chart {
            width: 80%;
            height: 600px;
            margin: -5px auto
        }
        .pp-div{
			margin-left:5px;width: 100%;
        }
       .pp-div p{
        	color:#7d7b7b;
        	font-size: 17px;
        	word-spacing:1px;
        	letter-spacing:1px;
        }
		.pp-div span{
        	color:#7d7b7b;
        	font-size: 14px;
        	word-spacing:1px;
        	letter-spacing:1px;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <div class="search-bar">
        <div class="condition">
			<c:if test="${userRoleIndex ne 1 }">
				<span>
	                <label>年份:</label>
	                <select name="year" id="year">
	                    <c:forEach begin="2016" end="2019" var="y">
	                    	<option value="${y}" <c:if test="${y eq 2019 }" >selected='selected'</c:if>>${y}</option>
	                    </c:forEach>
                    </select>
				</span>
            	<span>
	                <label>院线:</label>
                    <input id="intheaterId_1" name="intheaterId_1" type="hidden">
                    <input id="intheatername_1" class="inputxt" readonly="readonly" style="width: 120px;"/>
                    <t:choose hiddenName="intheaterId_1" hiddenid="id" inputTextname="intheatername_1"
                              url="zyIntheaterController.do?zyintheatersCheckboxList"
                              name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                              isclear="true" height="300px" width="400px"/>
				</span>
            	<span >
	                <label>省市:</label>
                    <input type="text" id="province" name="province"/>
                    <script type="text/javascript">
                        territoryLink("", "province");
                    </script>
				</span>
            	<span>
	                <label>机型:</label>
                    <input id="typeId" name="type.id" type="hidden"/>
                    <input id="typeName" type="text" readonly="readonly" style="width: 150px" class="inputxt"/>
                    <t:choose hiddenName="typeId" hiddenid="id" inputTextname="typeName" textname="text"
                              title="机型" url="zyEquipmentTypeController.do?goChooseEquipmentTypeForEquipment"
                              name="zyEquipmentTypeList" width="600px" height="400px"
                              icon="icon-search" isclear="true"/>
				</span>
			</c:if>
	    </div>
	    <div>
	    	<c:if test="${userRoleIndex ne 1 }">
				<span>
				    <a href="javascript:searchData();" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="search">查询</a>
				</span>
			</c:if>
		</div>
    </div>
    <div class="pp-div">
    	<p >巡检进度报告<br>
    		<span >深蓝色柱图为中影巴可针对贵院线的巡检计划，浅蓝色柱图体现当月完成的数量。</span><br>
    		<span >2016年数据作为历史数据，无法提供月度巡检计划，还请体谅。</span>
    	</p>
    </div>
    <div id="chart" style="height: 500px;width: 55%;display: inline-block"></div>
    <div id="chart2" style="height: 500px;width: 48%;display: inline-block;"></div>
    <div id="linePieChart" style="height: 500px;width: 48%;display: inline-block;"></div>
</div>
<script type="text/javascript">
$(function(){
	searchData();
    // $("select[name='chain']").children(":first").text("全部院线");
});

bar1option = {
	    title: {
	        text: '2016年巡检进度表'
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
        grid: {
            top: 40,
            bottom: 20
        },
	    legend: {
	        data: ['计划','完成']
	    },
	    xAxis: {
	    	type: 'value',
	        boundaryGap: [0, 0.01]
	    },
	    yAxis: {
	    	type: 'category',
	        data: ['计划','完成']
	    },
	    series: [{
	    	name : '巡检计划',
	    	type : 'bar',
            barWidth: '30%',
	    	data :[]
	    }]
	};
bar2option = {
	    title: {
	        text: '巡检进度表'
	    },
	    color: ['#3398DB'],
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
        grid: {
            top: 40,
            bottom: 20
        },
	    xAxis : [
	        {
	            type : 'category',
	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
	            axisTick: {
	                alignWithLabel: true
	            }
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'计划',
	            type:'bar',
	            data:[]
	        },
	        {
	            name: '完成',
	            type: 'bar',
	            data: []
	        }
	    ]
	};
linePieOption = {
	    backgroundColor: "#FFFFFF",
	    color: ['#293C55', '#3398DB'],
	    title: [{
	        text: '累计进度表',
	        left: '2%'
	    }, {
	        text: '占比分析',
	        left: '75%'
	    }],
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        x: 200,
	        data: [{
	                name : '巡检计划数量',
	                textStyle : {
	                    color : '#293C55'
	                }
	            },{
	                name : '实际完成数量',
	                textStyle : {
	                    color : '#3398DB'
	                }
	            }]
	    },
        grid: {
            top: 40,
            bottom: 20,
            right: '38%'
        },
	    xAxis: {
	        type: 'category',
	        axisLabel: {
	            textStyle: {
	                color: '#293C55'
	            }
	        },
	        boundaryGap: false,
	        data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        name: '计划待完成量',
	        smooth: true,
	        type: 'line',
	        symbolSize: 8,
	        symbol: 'circle',
	        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	    }, {
	        name: '完成数量',
	        smooth: true,
	        type: 'line',
	        symbolSize: 8,
	        symbol: 'circle',
	        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	    }, {
	        type: 'pie',
	        center: ['80%', '20%'],
	        radius: ['15%', '25%'],
	        label: {
	            normal: {
	                position: 'outside'
	            }
	        },
	        data: [{
	            value: 0,
	            name: '计划待完成量',
	            itemStyle: {
	                normal: {
	                    color: '#ef7912'
	                }
	            },
	            label: {
	                emphasis: {
	                    formatter: '{d} %',
	                    textStyle: {
	                        color: '#ef7912'

	                    }
	                }
	            }
	        }, {
	            value: 0,
	            name: '完成数量',
	            itemStyle: {
	                normal: {
	                    color: '#22a26e'
	                }
	            },
	            label: {
	                emphasis: {
	                    formatter: '{d} %',
	                    textStyle: {
	                        color: '#22a26e'
	                    }
	                }
	            }
	        }]
	    }]
	};


function searchData() {
	var year = $("#year").val() == undefined ? "2019" : $("#year").val();//院线用户首页点击进来是没有条件的
    $.getJSON("zyIpReportXXController.do?queryIpReportAData", {
    	year : year,
        chain : $("#intheatername_1").val(),
        typeId : $("#typeId").val(),
        territoryL2 : $("#territoryL2").val(),
        territoryL3 : $("#territoryL3").val()
    }, function (data) {
        if (!$.isEmptyObject(data)) {
        	var inline_block = {"display":"inline-block"}
            switch(year){
	        	case "2016":
	        		$("#chart").show();
	        		initChart1(data);
	        		$("#chart2").hide();
	        		$("#linePieChart").hide();
	        		break;
	        	default:
	        		$("#chart").hide();
	        		$("#chart2").css(inline_block);
	        		initChart2(data);
	        		$("#linePieChart").css(inline_block);
	        		initLinePieChart(data);
	        		break;
	    	}
        }
    })
}
function initChart1(data){
	var myChart = echarts.init(document.getElementById('chart'));
    
	bar1option.series[0].data = [{
			value: data.planCount,
			itemStyle :{
				normal :{
					color : '#2F4554'
				}
			}
    	},{
    		value: data.actuCount
    	}
    ];
    myChart.setOption(bar1option);
}
function initChart2(data){
	 var myChart2 = echarts.init(document.getElementById('chart2'));
     var lt =[], dt = {};
 	$(data.planEachMonth).each(function(i,item){
 		dt = {}
 		dt.value = item;
 		dt.itemStyle = {
				normal :{
					color : '#2F4554'
				}
 		}
 		lt.push(dt);
 	});
     bar2option.series[0].data = lt;
     bar2option.series[1].data = data.completeEachMonth;
     myChart2.setOption(bar2option);
}
function initLinePieChart(data){
	var linePieChart = echarts.init(document.getElementById('linePieChart'));
	linePieOption.series[0].data = data.linePieJson.planCountEachMonth;
	linePieOption.series[1].data = data.linePieJson.actEachMonth;
	linePieOption.series[2].data[0].value = data.linePieJson.countPlan;
	linePieOption.series[2].data[1].value = data.linePieJson.countDone;
	linePieChart.setOption(linePieOption);
}


</script>
</body>
</html>
